<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>生日快乐</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

    <style>
      .Birthday{
        font-size: 35px;
        color: yellow;
        text-align: center;
        z-index: 9999;
      }
    </style>
</head>

<body>

  <main>
    <audio src="music/3.mp3" autoplay="autoplay" loop="loop"></audio>
    <div class="Birthday">金城亿 &nbsp;&nbsp;&nbsp;生日快乐!</div>
  <ul class="star" style="--v: 1; --t: 1;">
    <li style="--i: 0"></li>
  </ul>
  <ul style="--v: 2; --t: 8; --direction:reverse">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
  </ul>
  <ul style="--v: 3; --t: 12">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
  </ul>
  <ul style="--v: 4; --t: 18; --direction:reverse">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
    <li style="--i: 12"></li>
    <li style="--i: 13"></li>
    <li style="--i: 14"></li>
    <li style="--i: 15"></li>
    <li style="--i: 16"></li>
    <li style="--i: 17"></li>
  </ul>
  <ul style="--v: 5; --t: 22">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
    <li style="--i: 12"></li>
    <li style="--i: 13"></li>
    <li style="--i: 14"></li>
    <li style="--i: 15"></li>
    <li style="--i: 16"></li>
    <li style="--i: 17"></li>
    <li style="--i: 18"></li>
    <li style="--i: 19"></li>
    <li style="--i: 20"></li>
    <li style="--i: 21"></li>
  </ul>
  <ul style="--v: 6; --t: 26; --direction:reverse">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
    <li style="--i: 12"></li>
    <li style="--i: 13"></li>
    <li style="--i: 14"></li>
    <li style="--i: 15"></li>
    <li style="--i: 16"></li>
    <li style="--i: 17"></li>
    <li style="--i: 18"></li>
    <li style="--i: 19"></li>
    <li style="--i: 20"></li>
    <li style="--i: 21"></li>
    <li style="--i: 22"></li>
    <li style="--i: 23"></li>
    <li style="--i: 24"></li>
    <li style="--i: 25"></li>
  </ul>
  <ul style="--v: 7; --t: 32">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
    <li style="--i: 12"></li>
    <li style="--i: 13"></li>
    <li style="--i: 14"></li>
    <li style="--i: 15"></li>
    <li style="--i: 16"></li>
    <li style="--i: 17"></li>
    <li style="--i: 18"></li>
    <li style="--i: 19"></li>
    <li style="--i: 20"></li>
    <li style="--i: 21"></li>
    <li style="--i: 22"></li>
    <li style="--i: 23"></li>
    <li style="--i: 24"></li>
    <li style="--i: 25"></li>
    <li style="--i: 26"></li>
    <li style="--i: 27"></li>
    <li style="--i: 28"></li>
    <li style="--i: 29"></li>
    <li style="--i: 30"></li>
    <li style="--i: 31"></li>
  </ul>
  <ul style="--v: 8; --t: 36; --direction:reverse">
    <li style="--i: 0"></li>
    <li style="--i: 1"></li>
    <li style="--i: 2"></li>
    <li style="--i: 3"></li>
    <li style="--i: 4"></li>
    <li style="--i: 5"></li>
    <li style="--i: 6"></li>
    <li style="--i: 7"></li>
    <li style="--i: 8"></li>
    <li style="--i: 9"></li>
    <li style="--i: 10"></li>
    <li style="--i: 11"></li>
    <li style="--i: 12"></li>
    <li style="--i: 13"></li>
    <li style="--i: 14"></li>
    <li style="--i: 15"></li>
    <li style="--i: 16"></li>
    <li style="--i: 17"></li>
    <li style="--i: 18"></li>
    <li style="--i: 19"></li>
    <li style="--i: 20"></li>
    <li style="--i: 21"></li>
    <li style="--i: 22"></li>
    <li style="--i: 23"></li>
    <li style="--i: 24"></li>
    <li style="--i: 25"></li>
    <li style="--i: 26"></li>
    <li style="--i: 27"></li>
    <li style="--i: 28"></li>
    <li style="--i: 29"></li>
    <li style="--i: 30"></li>
    <li style="--i: 31"></li>
    <li style="--i: 32"></li>
    <li style="--i: 33"></li>
    <li style="--i: 34"></li>
    <li style="--i: 35"></li>
  </ul>
</main>
  
  

</body>

</html>
